<template>
  <el-row>
    
   <!--  搜索操作区 -->
    <el-row class="pb10 little-header">
          <el-col :md='16' :lg='10' align='left'>
                
                        <el-input class='w-50' placeholder='请输入名称' v-model.trim='search.name'   @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                        <el-button icon="el-icon-search" type='primary' @click='pageInit()'>搜索</el-button>
              
          </el-col>
          <el-col :md='{span:5,offset:1}' :lg='{span:10,offset:3}' align="right" >  
              
                        <el-button type="primary" icon="el-icon-plus" size="small" round v-show="permission.add" @click="handleCreate()">新增</el-button>
                        <!-- <el-button  class='export-icon'               size="small" round  v-show="permission.add" @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button> -->
               
          </el-col>
    </el-row>
    <!-- table -->
    <el-table border  :data="tableList" style="width: 100%" >
          <el-table-column prop="name"            label="名称"     align="center"></el-table-column>
          <el-table-column prop="description"     label="描述"     align="center"></el-table-column>
          <el-table-column prop="aprt"            label="相关项目"  align="center"></el-table-column>
          <el-table-column prop="midifyTime"      label="更新时间"  align="center">
                <template slot-scope="scope">
                      {{scope.row.modifyTime | formatDate}}
                </template>
          </el-table-column>
          <el-table-column prop="cretaeUserName"  label="创建人"    align="center"></el-table-column>
          <el-table-column label="操作"                    align="center"  width="200">
                  <template v-slot="list">
                          <el-button v-show="permission.edit"   type="primary" size="mini" round @click="handleEdit(list.$index, list.row)">编辑</el-button>
                          <el-button v-show="permission.remove" type="danger"  size="mini" round @click="handleDelete(list.$index, list.row)">删除</el-button>
                  </template>
          </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class='mt28'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[2, 10, 20]"
            :page-size="10"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total">
    </el-pagination>
    <!-- 新增/编辑弹框 -->
    <Edit ref="formEdit" :parentList="parentList" v-on:save-finished="pageInit()"></Edit>
  </el-row>
  
</template>

<script>

//接口
import { listDuifu , getDuifuById , removeDuifu} from '@/api/settings/duifu'
//角色新增/编辑组件
import  Edit  from '@/components/settings/duifuEdit'
export default {
  name: 'settings_duifu',
  data () {
    return {
      
      //查询 /初始化
      search: {
        name: this.Global.ie_nine == true ? '请输入名称':'',/*placeholder 兼容ie9 △*/
        limit: 10,
        currentPage:1
      },
      search_place_str:'请输入名称',//placeholder输入内容 placeholder 兼容ie9 △

      Total:null,//表格总页数
      permission:{//表格允许操作
        add:true,
        edit:true,
        remove:true
      },
      tableList:[],//列表data
      parentList:[]
    }
  },
  created() {
    this.pageInit()
  },
  methods:{
    // 初始化表格数据
    pageInit(){
      
      let that =this
      listDuifu(this.search).then(response => {
        
        this.Total = response.data.totalRs
        this.tableList = response.data.dataList
      })
      .catch(error => {
          console.log(error)
      })
    
          
        
    },
    /*新增角色 跳转页面
     *@method 方法名
     *@for 所属类名
     *@param{} 
     *@return {} 
    */
    handleCreate(){
      this.$refs.formEdit.$emit('openAddDialog')
    },
     
    /*编辑角色
     *@method 方法名
     *@for 所属类名
     *@param{index, row} 某一行id 某一行
     *@return {true/false} 编辑成功/失败
    */
     handleEdit(index, row){
          getDuifuById(row.code).then(res=>{
              let detailData=res.data
              this.$refs.formEdit.$emit('openEditDialog', detailData.data)
          })
        
    },
    //删除
    handleDelete(index, row) {
      let that=this;
      this.$confirm('确定删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        

        removeDuifu(row.code)
          .then(response => {
            
            
            this.$message({type:'success',message:'删除成功'})
            this.pageInit()
          })
          .catch(error => {
            
            that.outputError(error)
          })
      })
      .catch(() => {})
    },
    //导出
    handleExport(){

    },
    /*placeholder 兼容ie9 focus-blur △*/
    focusinput(e){
        if(this.Global.ie_nine == true){
            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
        }
    },
    blurinput(e){
        if(this.Global.ie_nine == true){
            let val = e.srcElement.value//ie9下只能用这个值
            this.search.name = val == '' ? this.search_place_str:val
        }
    },
    //
    /*每页显示条数变化 */
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = (this.search.currentPage - 1) * val
      this.pageInit()
    },
    /*页数变化 */
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      this.pageInit()
    },
  },
  components:{
    Edit
  }
}
</script>

<style scoped>
</style>
